/*
    创建者：shuxiaokai
    创建时间：2021-06-15 22:22
    模块名称：全局卡片
    备注：
*/
<template>
  <div class="s-card" :class="{shadow: shadow}" :style="{ width: width }">
    <header v-if="$slots.operation || title">
      <div class="title">{{ title }}</div>
      <div>
        <slot name="operation"></slot>
      </div>
    </header>
    <!-- 搜索 -->
    <section ref="content" class="content" :style="{padding: padding}">
      <slot></slot>
    </section>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    title: { // card头部标题
      type: String,
      default: '',
    },
    width: { //宽度
      type: String,
      default: '100%',
    },
    shadow: { //是否显示阴影
      type: Boolean,
      default: false,
    },
    padding: { //内容区域内边距
      type: String,
      default: '5px 10px',
    },
  },
  data() {
    return {
      showContent: true, //是否展示内容信息
    };
  },
  methods: {
  },
})
</script>

<style lang="scss">
.s-card {
    width: 100%;
    border: 1px solid $gray-300;
    background: $white;
    border-radius: $border-radius-base;
    display: flex;
    flex-direction: column;
    &>header {
        font-size: fz(16);
        height: size(35);
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid $gray-300;
        color: $theme-color;
        padding: 0 1em;
        &.active {
            cursor: pointer;
            transition: background-color 0.3s;
            &:hover {
                background: $gray-100;
            }
        }
    }
    // 内容区域
    .content {
        position: relative;
        overflow-y: auto;
        &.active {
            padding: 0rem !important;
            height: 0px !important;
        }
    }
}
</style>
